<template>
	<view>
		<view class="header-demo" id="header-demo">
			<view class="demo-left">
				上传微信二维码，便于顾客在有问题时找到客服。
			</view>
			<view class="demo-right" @click="demoOverlayShow = true">
				查看样例
				<u-icon name="arrow-right" color=" rgb(36,178,241)" size="12"></u-icon>
			</view>
		</view>
		<view class="header-batch" id="header-batch">
			<view>
				您可以批量设置多个场地,也可在下方逐个添加
			</view>
			<view class="batch">
				<u-button type="primary" size="mini" @click="nav('./brand-wechat-set/brand-wechat-batch')">批量设置
				</u-button>
			</view>
		</view>
		<view class="search" id="search">
			<u-search placeholder="场地名称" v-model="page.storeName" :show-action="true" action-text="取消" :animation="true"
				height="35" @search="search" clearable></u-search>
		</view>
		<view class="main">
			<view class="card" id="defaultCard">
				<view class="line" hover-class="u-cell-hover" hover-stay-time="150"
					@click="nav('./brand-wechat-set/brand-wechat-set?brandInfoId=' + brandInfo.id)">
					<view class="left">
						默认
						<view class="left-deteil"
							v-if="$u.test.isEmpty(brandInfo.serviceWeChatNumber) && $u.test.isEmpty(brandInfo.serviceWeChatQr)">
							设置后新场地自动配置
						</view>
					</view>
					<view class="right">
						<view>{{!$u.test.isEmpty(brandInfo.serviceName) ? brandInfo.serviceName : '未设置'}}</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#999" size="15"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="card" v-if="list.length > 0">
				<scroll-view scroll-y @scrolltolower="reachBottom" :style="[{height: height + 'px'}]"
					lower-threshold="200">
					<view class="line" :class="index == list.length - 1 ? '' : 'line-bottom'" hover-class="u-cell-hover"
						hover-stay-time="150" v-for="(item,index) in list" :key="index"
						@click="nav('./brand-wechat-set/brand-wechat-set?storeIds='+JSON.stringify([item.merchantStoreId]))">
						<view class="left">{{item.storeName}}</view>
						<view class="right">
							<view>{{item.serviceName != null ? item.serviceName : '未设置'}}</view>
							<view class="icon">
								<u-icon name="arrow-right" color="#999" size="15"></u-icon>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :load-text="loadText" style="padding: 30rpx 0 70rpx 0;" />
				</scroll-view>
			</view>
			<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/list.png" />
		</view>
		<view class="nextBtn" id="btn">
			<view class="btn">
				<u-button type="primary" shape="circle" @click="navTab">返回首页</u-button>
			</view>
		</view>
		<u-overlay :show="demoOverlayShow" opacity="0.8">
			<view class="example">
				<view class="weChat-example-title">客服信息会出现在顾客扫码启动页的客服菜单内</view>
				<view class="weChat-example-image">
					<u-image :src="baseStaticFileUrl + '/image/brand/demo-weChat.jpg'" width="560rpx"
						height="1000rpx" />
				</view>
				<view class="close-example">
					<u-icon name="close-circle" color="#ffffff" size="50" @click="demoOverlayShow = false"></u-icon>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				brandInfo: {},
				list: [],
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉加载',
					loading: '稍等一会,正在努力为您加载...',
					nomore: '暂时没有更多了'
				},
				page: {
					pageNum: 1,
					storeName: '',
				},
				demoOverlayShow: false,
				baseStaticFileUrl: this.$configPath.staticFileUrl,
			}
		},
		onLoad() {
			this.findDefault();
		},
		onShow() {
			let _this = this;
			uni.$once('edit', function(res) {
				if (res == "true") {
					_this.findDefault();
				}
			})
		},
		onPullDownRefresh() {
			this.findDefault();
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#header-demo').boundingClientRect(data => {
				this.height = this.height - data.height;
			}).exec();
			query.select('#header-batch').boundingClientRect(data => {
				this.height = this.height - data.height;
			}).exec();
			query.select('#search').boundingClientRect(data => {
				this.height = this.height - data.height;
			}).exec();
			query.select('#defaultCard').boundingClientRect(data => {
				this.height = this.height - data.height;
			}).exec();
			query.select('#btn').boundingClientRect(data => {
				this.height = this.height - data.height;
			}).exec();
			this.height = this.height - 40;
		},
		methods: {
			nav(url) {
				uni.navigateTo({
					url: url
				})
			},
			navTab() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			search() {
				this.formatData();
			},
			findDefault() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('brandInfo.findByUserId').then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.brandInfo = res.data;
						this.formatData();
						this.findData();
					} else {
						getApp().err("请求不成功：" + res.msg);
					}
				})
			},
			findData() {
				this.$api('customerServiceInfo.findByUserIdPages', this.page).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.data != null) {
						this.list.push(...res.data.list)
						this.page.pageNum = res.data.pageNum;
						if (this.page.pageNum >= res.data.pages) {
							this.status = 'nomore';
							return;
						}
					}
				})
			},
			formatData() {
				this.list = [];
				this.page.pageNum = 1;
				this.status = 'loadmore';
			},
			reachBottom() {
				// console.log("-------------下拉加载---------- ----")
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				// 使用延迟实现加载动画效果
				setTimeout(() => {
					this.page.pageNum = ++this.page.pageNum;
					this.findData();
					this.status = 'loadmore';
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-demo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: $u-padding-medium;
		background-color: rgb(217, 226, 255);
		font-size: $f-sm;
		color: $u-primary;

		.demo-right {
			display: flex;
			align-items: center;
		}
	}

	.header-batch {
		padding: $u-padding-large $u-padding-medium;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		color: rgba(0, 0, 0, 0.7);
		font-size: $f-base;

		.batch {
			text-align: right;
		}
	}

	.search {
		background-color: white;
		padding: 0 $u-padding-medium $u-padding-medium $u-padding-medium;
	}

	.main {
		padding: 0 $u-padding-large;
		color: rgba(0, 0, 0, 0.75);
		font-size: $f-base;

		.card {
			margin: $u-margin-medium 0;
			padding: $u-padding-mini;
			background-color: white;
			border-radius: 20rpx;

			.line {
				padding: $u-padding-large $u-padding-medium;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;

				.left {
					font-size: $uni-font-size-lg - 1;
					font-weight: 450;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left-deteil {
						font-weight: normal;
						font-size: $uni-font-size-sm;
						margin-left: $u-margin-medium;
						color: $u-tips-color;
					}
				}

				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: $u-tips-color;
					font-size: $uni-font-size-base;

					.icon {
						margin-left: $u-margin-medium;
					}
				}
			}

			.line-bottom {
				border-bottom: 1rpx solid #fafafa;
			}
		}
	}

	.nextBtn {
		z-index: 99;
		border-top: 1px solid #fafafa;
		width: 100%;
		height: 166rpx;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		font-size: $f-base;

		.btn {
			margin-top: 20rpx;
			padding: 0 $u-padding-medium $u-padding-medium $u-padding-medium;
		}
	}

	.example {
		padding: 40rpx;

		.weChat-example-title {
			color: #FFFFFF;
			font-size: $f-base;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.weChat-example-image {
			display: flex;
			justify-content: center;
		}

		.close-example {
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>